<template>
  <MyModal ref="myModal" title="宝贝列表" :top="25" :width="1300">
    <template #content>
      <a-table
        style="height: 500px; overflow-y: scroll"
        :columns="columns"
        :data-source="dataSource"
        :pagination="false"
      >
        <template #emptyText>
          <a-empty description="暂无数据" />
        </template>

        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'id'">
            <div style="width: 150px">{{ record.id }}</div>
          </template>

          <template v-if="column.key === 'title'">
            <div style="width: 120px">{{ record.title }}</div>
          </template>

          <template v-if="column.key === 'createTime'">
            <div style="width: 140px">{{ timeFormat(record.createTime) }}</div>
          </template>
        </template>
      </a-table>
    </template>
  </MyModal>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { timeFormat } from '@/hooks/util'

const myModal = ref()
const showModal = (item: any) => {
  myModal.value?.showModal()
  dataSource.value = item.polishProductRelList
}

const emit = defineEmits<{
  refresh: []
}>()

defineExpose({
  showModal,
})
const dataSource = ref([])
const columns = [
  {
    title: 'ID',
    key: 'id',
    width: 130,
  },
  {
    title: '宝贝名称',
    key: 'title',
    width: 150,
  },
  {
    title: '添加时间',
    key: 'createTime',
    width: 90,
  },
]
</script>
